JS API 的加载 最后更新时间: 2023年05月15日
JS API 支持多种加载方式,可以顺序加载也可以异步加载,同时也可以作为一般脚本资源被 RequireJS 等前端框架加载。
注意:为避免地图数据协议和前端资源不匹配导致页面运行报错,只允许在线加载 JSAPI,禁止进行本地转存、与其它代码混合打包等用法。
顺序同步加载
异步加载
异步加载指的是为 JS API 指定加载的回调函数,在 JS API 的主体资源加载完毕之后,将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前,异步加载可以减少对其他脚本执行的阻塞,HTTPS 下我们也建议使用异步方式:
<script type="text/javascript">
window.init = function(){
var map = new AMap.Map('container', {
center:[117.000923,36.675807],
zoom:11
});
}
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>
或者
window.onLoad = function(){
var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);使用 RequireJS 等加载
在使用 RequireJS 等前端框架时,JS API 应该被当作一般脚本资源,并使用上述异步方式进行加载,比如
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
width: 100%;
height: 100%;
margin: 0px
}
</style>
<title>通过RequireJS加载</title>
</head>
<body>
<div id="container" tabindex="0"></div>
<script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script>
</body>
</html>require-init.js
initAMap.js
define(function() {
var init = function() {
var amap = new AMap.Map('container');
};
return {
init: init
};
});